<template>
    <div>
        <div class="m-content">
            <div class="c-top">
                <div class="container">
                    <div class="c-date">
                        <div class="date-text">服务{{year_data}}</div>
                        <div class="c-right">
                            <ul>
                                <li @click="PreviousYear()">《</li>
                                <li v-for="index of 12" :class="{'on':month_data===index}" @click="selectMonth(index)" :key="index">{{index}}月</li>
                                <li @click="NextYear()">》</li>
                            </ul>
                            <div class="r-line">
                                <div class="l-slider" @mousedown="mousedown($event)" :style="{'left':(45*month_data+'px')}"></div>
                            </div>
                        </div>
                    </div>

                    <div class="c-time">
                        <span>发布时间：4/8~4/18</span>

                        <div class="btn-group">
                            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="showHideSelect()">
                                3天内到期
                            </button>
                            <div class="dropdown-menu on" v-show="showSelect">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Separated link</a>
                            </div>
                        </div>

                        <button type="button" class="btn btn-primary">最近动态</button>
                    </div>


                    <div class="c-main">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="row-left">
                                    <div class="text">最<br/>新<br/>政<br/>策</div>
                                    <div class="icon"></div>
                                    <div class="icon"></div>
                                </div>
                                <div class="row-right">
                                    <ul>

                                        <li v-for="(item,index) in newPolicy" :key="index">
                                            <div class="r-text">{{item.text}}</div>
                                            <div class="r-time">{{item.time}}</div>
                                            <div class="r-ding">顶</div>
                                            <div class="r-day">{{item.day}}</div>
                                        </li>

                                    </ul>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="row-left green">
                                    <div class="text">最<br/>新<br/>政<br/>策</div>
                                    <div class="icon"></div>
                                    <div class="icon"></div>
                                </div>
                                <div class="row-right">
                                    <ul>

                                        <li v-for="(item,index) in newPolicy" :key="index">
                                            <div class="r-text">{{item.text}}</div>
                                            <div class="r-time">{{item.time}}</div>
                                            <!-- <div class="r-ding">顶</div> -->
                                            <div class="r-day"
                                            :class="{'color2':item.color === '2','color10':item.color === '10'}"
                                            >
                                                {{item.day}}
                                            </div>
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="c-server">
                <div class="container ">
                    <div class="row">
                        <!-- 人才服务 -->
                        <div class="col-lg-6">
                            <div class="c-title">
                                <div class="t-text">人才服务</div>
                                <div class="t-more">更多</div>
                            </div>
                            <div class="c-list">
                                <div class="l-item" v-for="(item,index) in pensorService" :key="index" >
                                    <div class="item-left">
                                        <img :src="item.img" alt="">
                                    </div>
                                    <div class="item-right"  @click="penService(index)">
                                        <div class="r-text">{{item.text}}</div>
                                        <div class="r-time">时间：{{item.time}}</div>
                                        <div class="r-place">
                                            <span>
                                                <img src="../../../static/images/placeBlue.png" alt="" v-show="index!==pensorServiceState">
                                                <img src="../../../static/images/place.png" alt="" v-show="index===pensorServiceState">
                                            </span>
                                            {{item.place}}
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- 惠管家 -->
                        <div class="col-lg-6">
                            <div class="c-title">
                                <div class="t-text">惠管家</div>
                                <button type="button" class="btn btn-primary">登陆惠管家</button>
                            </div>
                            <div class="c-img">
                                <img src="../../../static/images/demo-img3.png" alt="">
                            </div>
                            <div class="c-text">
                                <span>分享经验、共谋发展！--浙江企业家赴厦门考察游学启动分享经验、共谋发展浙江企业家赴厦门考察游学启动分享经验、共谋发展！--浙江企业家赴厦门考察游学启动分享经验、共谋发展！--浙江企业家赴厦门考察游学启动分享经验共谋发展！--浙江企业家赴厦门考察游学启动分享经验、共谋发展！--浙江企业家赴厦门考察游学启动分享经验、共谋发展！--浙江企业家赴厦门考察游学启动分享经验、共谋发展！--浙江企业家赴厦门考察游学启动分享经验、共谋发展！--浙江企业家赴厦门考察游学启动--浙江企业家赴厦门考察游学启动分享经验共谋发展！--浙江企业家赴厦门考察游学启动分享经验、共谋发展！--浙江企业家赴厦门考察游学启动分享经验、共谋发展！--浙江企业家赴厦门考察游学启动分享经验、共谋发展！--浙江企业家赴.....</span>
                                <span class="more">更多>></span>
                            </div>
                        </div>
                    </div>


                    <!-- 分页 -->
                    <div class="page">
                        <pagination :msg="page" @refreshList="onRefresList"></pagination>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import pagination from '../../views/localPage/pagination';
export default {
    data(){
        return{
            showSelect:false,//3天内到期的下拉是否显示
            newPolicy:[//最新政策的数据
                {
                    text:'开展2019年度江苏省双创人才和双创团队申报的通知111111',
                    time:'2019-03-12',
                    day:'19天',
                    color:'2',
                },
                {
                    text:'开展2019年度江苏省双创人才和双创团队申报的通知',
                    time:'2019-03-12',
                    day:'19天',
                    color:'10',
                },
                {
                    text:'开展2019年度江苏省双创人才和双创团队申报的通知',
                    time:'2019-03-12',
                    day:'19天'
                },
                {
                    text:'开展2019年度江苏省双创人才和双创团队申报的通知',
                    time:'2019-03-12',
                    day:'19天'
                },
                {
                    text:'开展2019年度江苏省双创人才和双创团队申报的通知',
                    time:'2019-03-12',
                    day:'19天'
                },
                {
                    text:'开展2019年度江苏省双创人才和双创团队申报的通知',
                    time:'2019-03-12',
                    day:'19天'
                },
                {
                    text:'开展2019年度江苏省双创人才和双创团队申报的通知',
                    time:'2019-03-12',
                    day:'19天'
                },
            ],
            pensorService:[//人才服务数据
                {
                    text:'分享经验、共谋发展！--浙江企业家赴厦门',
                    time:'2017-09-14 08:30 ~ 2017-09-15 17:30',
                    place:'福建省-厦门市-软件二期',
                    img:'../../../static/images/demo-img.png',
                },
                {
                    text:'分享经验、共谋发展！--浙江企业家赴厦门',
                    time:'2017-09-14 08:30 ~ 2017-09-15 17:30',
                    place:'福建省-厦门市-软件二期',
                    img:'../../../static/images/demo-img.png',
                },
                {
                    text:'分享经验、共谋发展！--浙江企业家赴厦门',
                    time:'2017-09-14 08:30 ~ 2017-09-15 17:30',
                    place:'福建省-厦门市-软件二期',
                    img:'../../../static/images/demo-img.png',
                },
                {
                    text:'分享经验、共谋发展！--浙江企业家赴厦门',
                    time:'2017-09-14 08:30 ~ 2017-09-15 17:30',
                    place:'福建省-厦门市-软件二期',
                    img:'../../../static/images/demo-img.png',
                },
            ],
            pensorServiceState:0,//用于判断点击哪个人才服务数据
            page:1,//页数
            maxPage:3,//总页数
            month_data:4,//顶部选中月份
            year_data:2019,//顶部年份
            page:{
                pagesize:4,
                total:900,
            },
        }

    },
    methods:{
        showHideSelect(){//点击3天内到期的下拉
            this.showSelect = !this.showSelect;
        },
        penService(e){//点击人才服务数据
            this.pensorServiceState=e;
        },
        PreviousPage(){//点击上一页
            if(this.page===1){
                return;
            }
            this.page = this.page-1;
        },
        NextPage(){//点击下一页
            if(this.page===this.maxPage){
                return;
            }
            this.page = this.page+1;
        },
        ClickPage(page){//点击页数
            this.page=page;
        },
        selectMonth(month){//选中月份
            this.month_data=month;
        },
        mousedown(e){//鼠标点击滑块
            let odiv = e.target;        //获取目标元素

            //算出鼠标相对元素的位置
            let disX = e.clientX - odiv.offsetLeft;
            // let disY = e.clientY - odiv.offsetTop;
            document.onmousemove = (e)=>{       //鼠标按下并移动的事件
                //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX;
                // let top = e.clientY - disY;

                //绑定元素位置到positionX和positionY上面
                // this.positionX = top;
                this.positionY = left;

                //移动当前元素
                // odiv.style.left = left + 'px';
                // odiv.style.top = top + 'px';
                var n =  Math.ceil(left/45);
                if(n>13){
                    n=13;
                }
                if(n<2){
                    n=2;
                }
                this.month_data=n-1;

            };
            document.onmouseup = (e) => {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        },
        PreviousYear(){//点击上一年
            this.year_data = this.year_data-1
        },
        NextYear(){//下一年
            this.year_data = this.year_data+1
        },
        onRefresList(val){
          console.log(val)
        }




    },
    components:{pagination},
}
</script>

<style lang="less" scoped>
    .m-content{
        .c-top{
            padding-top:30px;
            height: 732px;
            background-image: url(../../../static/images/BenefitPolicy_logo.png);
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            .c-date{
                background: rgba(0,0,0,0.54);
                height: 101px;
                color: #fff;
                .date-text{
                    font-size:30px;
                    font-family:MicrosoftYaHei;
                    font-weight:400;
                    float: left;
                    margin: 15px 4% 0 12%;
                }
                .c-right{
                    float: left;
                    font-size: 20px;
                    &>ul{
                        margin-top: 13px;
                        li{
                            display: inline-block;
                            // margin-left: 14px;
                            width: 45px;
                            &:first-child{
                                margin-left: 0;
                            }
                            &.on{
                                font-weight: bold;
                            }
                        }
                    }
                    .r-line{
                        margin-top: 25px;
                        width: 100%;
                        background-color: #418DF6;
                        height: 24px;
                        border-radius: 30px;
                        position: relative;
                        .l-slider{
                            position: absolute;
                            top: 0;
                            // width: 7%;
                            width: 45px;
                            background: #91BFFF;
                            height: 100%;
                            border-radius: 30px;
                            transition: all .5s;
                        }

                    }

                }
            }
            .c-time{
                height: 100px;
                line-height: 100px;
                text-align: center;
                position: relative;
                &>span{
                    color: #002862;
                }
                .btn{
                    background: #2C86F5;
                    border: #2C86F5;
                    margin-top: 30px;;
                }
                .btn-primary{
                    position: absolute;
                    right: 12%;
                }
                .btn-group{
                    right: 0;
                    position: absolute;
                    .dropdown-menu{
                        line-height: 20px;
                        &.on{
                            display: block;
                        }
                    }
                }
            }
            .c-main{
                .row-left{
                    background: #1575F9;
                    border-radius:8px 0px 0px 8px;
                    height:390px;
                    display: flex;
                    // align-items: center;
                    font-size:24px;
                    color: #fff;
                    position: relative;
                    float: left;
                    width:60px;
                    &.green{
                        background: #00981D;
                    }
                    .text{
                        width: 100%;
                        text-align: center;
                        margin-top: 82px;
                    }
                    &>.icon{
                        width: 20px;
                        height: 20px;
                        position: absolute;
                        border-bottom: 1px solid #fff;
                        border-right: 1px solid #fff;
                        bottom: 20%;
                        transform:rotate(45deg);
                        left: 33%;
                        &:nth-child(2){
                            bottom: 25%;
                        }
                    }
                }
                .row-right{
                    float: left;
                    margin-left: 5px;
                    width: 85%;
                    &>ul{
                        &>li{
                            background: #DCECFF;
                            height: 50px;
                            padding: 8px 60px 8px 15px;
                            position: relative;
                            margin-top: 5px;
                            &:first-child{
                                margin-top: 0;
                            }
                            .r-text{
                                font-size: 14px;
                                width: 86%;
                                overflow: hidden;
                                text-overflow:ellipsis;
                                white-space: nowrap;
                            }
                            .r-time{
                                color: #999999;
                                font-size: 12px;
                            }
                            .r-ding{
                                background: #1575F9;
                                position: absolute;
                                font-size: 10px;
                                color: #fff;
                                padding: 1px 3px;
                                border-radius: 2px;
                                top: 17%;
                                right: 20%;;
                            }
                            .r-day{
                                background: #1575F9;
                                color: #fff;
                                position: absolute;
                                top: 25%;
                                right: 5%;
                                font-size: 14px;
                                height: 26px;
                                line-height: 26px;
                                width: 54px;
                                text-align: center;
                                border-radius: 3px;
                                &.color2{
                                    background: #F5442C;
                                }
                                &.color10{
                                    background: #E06F00;
                                }
                            }
                        }
                    }
                }
            }
        }

        .c-server{

            .container{
                background: #F3F3F3;
                padding: 50px 0 80px;
                .row{
                    padding: 15px;

                    .c-title{
                        .t-text{
                            font-size: 20px;
                            font-weight:bold;
                            font-family:MicrosoftYaHei-Bold;
                            padding: 5px 0px;
                            width: 140px;
                            text-align: center;
                            position: relative;
                            display: inline-block;
                            &::before,&::after{
                                content: '';
                                left: 0;
                                position: absolute;
                                width: 100%;
                                height: 2px;
                                background:linear-gradient(90deg,rgba(21,117,249,0) 0%,rgba(21,117,249,0.99) 50%,rgba(21,117,249,0) 100%);
                            }
                            &::before{
                                top: 0
                            }
                            &::after{
                                bottom: 0;
                            }

                        }
                        .t-more{
                            font-size:16px;
                            font-family:MicrosoftYaHei;
                            font-weight:400;
                            color:rgba(21,117,249,1);
                            float: right;
                            margin-top: 18px;
                        }
                        &>button{
                            background:linear-gradient(0deg,rgba(21,117,249,1) 0%,rgba(47,193,247,1) 100%);
                            border: none;
                            float: right;
                            font-size: 16px;
                            width: 110px;
                            margin-top: 10px;
                        }
                    }
                    .c-list{

                        .l-item{
                            height: 155px;
                            margin-top: 30px;
                            position: relative;
                            .item-left{
                                padding: 7px 0 0 10px;
                                height: 100%;
                                width: 157px;
                                // border: 1px solid #000;
                                background: url(../../../static/images/rectangle.png) no-repeat;
                                background-size: cover;
                                img{
                                    width: 180px;
                                    height: 140px;
                                }
                            }
                            .item-right{
                                width: 380px;
                                height: 120px;
                                // background: #3D91E8;
                                background: #fff;
                                position: absolute;
                                right: 0;
                                top: 10%;
                                -webkit-transition: all .4s;
                                -moz-transition: all .4s;
                                -ms-transition: all .4s;
                                transition: all .4s;
                                &>div{
                                    width: 85%;
                                    margin: 12px auto 0;
                                    font-weight:400;
                                    font-family:MicrosoftYaHei;
                                    overflow: hidden;
                                    text-overflow:ellipsis;
                                    white-space: nowrap;
                                }
                                .r-text{

                                    font-size:16px;
                                    color: #333333
                                }
                                .r-time{
                                    font-size:12px;
                                    color: #999999;
                                }
                                .r-place{
                                    font-size:16px;
                                    color: #1575F9;
                                    margin-top: 10px;
                                    &>span{
                                        vertical-align: baseline;
                                        display: inline-block;
                                        width: 15px;
                                        img{
                                            width:100%;
                                        }
                                    }
                                }
                                &:hover{
                                    background: #3D91E8;
                                    .r-place,.r-time,.r-text{
                                        color: #fff;
                                    }
                                }
                            }

                        }

                    }
                    .c-img{
                        width: 100%;
                        img{
                            width: 100%;
                            margin-top: 20px;
                        }
                    }
                    .c-text{
                        font-size: 16px;
                        color: #333;
                        background: #fff;
                        padding: 30px 20px;
                        position: relative;
                        .more{
                            position: absolute;
                            color: #1575F9;
                            font-size: 14px;
                            right: 20px;
                            bottom: 10px;
                        }
                    }

                }
                .page{
                    margin-top: 60px;
                    text-align: center;
                    nav{
                        background: none;
                        margin: 0 auto;
                        width: 30%;
                        .page-item{
                            margin-left: 10px;
                            &>a{
                                border-radius: 3px;
                            }
                        }
                    }
                }

            }
        }

    }
</style>
